PPI,DPI,dppx,pt和dp

2017-7-24

PPI

PPI 的英文是 Pixels per inch,翻译过来就是每英寸像素数量。

通常用在显示器上,因为显示器的屏幕是由一个一个的像素组成的。

DPI

DPI 的英文是 Dots per inch,翻译过来就是每英寸点数量。

通常用在印刷行业,如果我们用放大镜来看打印出来的东西,可以看到一个一个的圆点。

因为 PPI 和 DPI 的概念很相近,所以现在大家基本上会将 PPI 等同于 DPI

dppx

dppx 的英文是 Dots Per Pixel,翻译过来是点的数量没像素?这里就很奇怪了,明明点跟像素差不多是同一个意思啊。

这里的 pixel 是指 CSS 中的 px unit,而不是实际显示器的像素。

dppx 就是一个 CSS 的 px 对应实际屏幕的多少个 px。

比如 retina macbook pro 的分辨率是 2560 * 1600,网页布局时按照1280 * 800来布,那么一个CSS 的 px,就代表两个显示器的dot,dppx就是2。

pt

pt 是 IOS 和 Mac 开发中的尺寸单位,是一个与 dpi 无关的值,类似于 CSS 中的 px。相应的,IOS 上的 1x、2x、3x 的图。

1x 用在 3GS 上,那么在 3GS 上,1pt 就等于1个像素。

2x 图用在 iPhone 4 上,那么 1pt 就等于 2个像素。

由于 iPhone 4 的 PPI 刚好是 3GS 的两倍,所以 1pt 在 3GS 和 iPhone 4 上看起来的大小是一样的。

dp

dp 是 Android 开发中的尺寸单位,其实与 pt 是一样的东西,只不过要注意的一点是,安卓的切图是按照 DPI 的不同,分为好几种不同的尺寸,而不是像 IOS 只有3种。

Android 分为 120(low)、160(medium)、 240(high)、320(xhigh) 等

按照官方的说法 1dp 就是 medium PPI下,一个像素的大小,公式是:px = dp * (dpi / 160)

推理可得,240PPI 下 1dp = 1.5px,320PPI 下 1dp = 2px。

但是还要特别注意的一点是,在 Android 定义的几个 PPI 之间的屏幕,会强制归一为相近的 DPI,也就是说,比如我有一个 260DPI 的手机,实际上系统计算单位时会把 DPI 认为是 240,所以 1dp 还是 为1.5px。

这么做的目的是为了图片不被缩放

打个比方,比如我们有一张在切图,240PPI 下是 240px,也就是刚好在 240PPI 下大小为1英寸。

如果放到 260PPI 的手机上,由于260不是240的整数倍,我们的图如果要 240PPI 跟 260PPI 显示的都一样大,那么在 260PPI 下,我们要占用 260px。

把 240px 大的图片缩放到 260px,必定会造成图片的显示不是像素对齐的,质量就会受损。

所以安卓由于手机屏幕类型众多,为了保证图片的完美显示,就会在计算 dp 时,把 PPI 归一。

所以使用 dp 作为单位时,不同手机上看到的大小可能是不一样的,但是大小会近似。

参考

Pixel density

Dots per inch

- CSS | MDN

http://dpi.lv/

Designer's guide to DPI

iOS尺寸单位pt、ppi与px之间换算关系